<template>
    <div class="entity">
        <!--S主体-->
        <cube-scroll class="scroll" ref="scroll" :style="{height:scroll_height+'px'}" :options="scroll_options">
            <div id="after-address">核销地址:{{after_address}}</div>
            <div id="ul" v-if="list.length > 0">
                <!--                <div class="li">-->
                <!--                    <img class="icon" src="https://www.baidu.com/img/bd_logo1.png" />-->
                <!--                    <div class="right">-->
                <!--                        <p class="name">名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称</p>-->
                <!--                        <p class="price">价值:203.33</p>-->
                <!--                        <p class="exchange_number">已兑换:20</p>-->
                <!--                        <p class="number">数量:100</p>-->
                <!--                    </div>-->
                <!--                </div>-->
                <div class="li" v-for="item in list" v-bind:key="item.treasure_id">
                    <img class="icon" :src="item.icon" />
                    <div class="right">
                        <p class="name">{{item.name}}</p>
                        <p class="price">价值:{{toDecimal2(item.money)}}</p>
                        <p class="exchange_number">已兑换:{{item.exchange}}</p>
                        <p class="number">数量:{{item.number}}</p>
                    </div>
                </div>
            </div>
            <empty v-else>您还没有开到任何奖品哦</empty>
        </cube-scroll>
        <!--E主体-->

        <!--S底部-->
        <div id="footer" ref="footer">
            <cube-button class="button" :primary="true" @click="showQrcode" :disabled="!after_status">
                <svg class="self-iconfont" aria-hidden="true">
                    <use xlink:href="#icon-erweima"></use>
                </svg>
                <span>核销二维码</span>
            </cube-button>
        </div>
        <!--E底部-->

        <!--S兑换二维码-->
        <div id="qrcode" v-show="show_qrcode && after_status">
            <i class="close cubeic-close" @click="hideQrcode"></i>
            <div class="content">
                <img :src="exchange_qrcide" />
                <h2>扫一扫进行核销兑奖</h2>
            </div>
        </div>
        <!--E兑换二维码-->

    </div>
</template>

<script>
    import store from "../../store.js";
    import empty from "../../components/empty/Empty.vue";
    export default {
        name:"entity",
        data(){
            return {
                scroll_height:document.documentElement.clientHeight,
                activity_id:0,  //活动id
                //滚动参数
                scroll_options:{
                    scrollbar:true
                },
                list:[],
                after_address:"",  //核销地址
                show_qrcode:false,  //核销二维码显示状态
                exchange_number:"",  //兑换码
                exchange_qrcide:""  //兑换二维码
            };
        },
        components:{
            empty
        },
        computed:{
            //是否可核销
            after_status(){
                for(let i=0;i<this.list.length;i++){
                    if(this.list[i].exchange < this.list[i].number){
                        return true;
                    }
                }
                clearInterval(store.state.after_entity_timer);
                return false;
            }
        },
        created(){
            this.activity_id = this.$route.params.activity_id;
            this.getList();
            this.getAfterAddress();
            this.exchangeNumber();
        },
        mounted(){
            setTimeout(()=>{
                this.scroll_height = document.documentElement.clientHeight - this.$refs.footer.getBoundingClientRect().height;
            },100);
        },
        beforeDestroy(){
            clearInterval(store.state.after_entity_timer);
        },
        methods:{
            //获取核销地址
            getAfterAddress(){
                this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                    pages:"activity",
                    doing:"easyFind",
                    activity_id:this.activity_id,
                    return:["entity_address"]
                }))
                    .then((res)=>{
                        if(res.data.status == "success"){
                            this.after_address = res.data.data.entity_address;
                        }
                    })
                    .catch();
            },
            //获取列表
            getList(){
                this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                    pages:"memberTreasure",
                    doing:"getList",
                    type:2,
                    source:1,
                    uid:this.$sysinfo.uid,
                    activity_id:this.activity_id
                }))
                    .then((res)=>{
                        if(res.data.status == "success"){
                            this.list = res.data.data;
                        }
                        this.$nextTick(()=>{
                            this.$refs.scroll.refresh();
                        });
                    })
                    .catch();
            },
            //获取兑换码
            exchangeNumber(){
                this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                    pages:"entity",
                    doing:"exchangeNumber",
                    activity_id:this.activity_id,
                    uid:this.$sysinfo.uid
                }))
                    .then((res)=>{
                        if(res.data.status == "success"){
                            this.exchange_number = res.data.data.exchange_number;
                            this.exchange_qrcide = res.data.data.qrcode+"?time="+Date.now();
                        }
                    })
                    .catch();
            },
            //显示核销二维码
            showQrcode(){
                this.show_qrcode = true;
                clearInterval(store.state.after_entity_timer);
                store.state.after_entity_timer = setInterval(()=>{
                    this.getList();
                },500);
            },
            //隐藏核销二维码
            hideQrcode(){
                this.show_qrcode = false;
                clearInterval(store.state.after_entity_timer);
            },
            //补齐进去格式的小数
            toDecimal2(x){
                let f = parseFloat(x);
                if (isNaN(f)) {
                    return false;
                }
                f = Math.round(x*100)/100;
                let s = f.toString();
                let rs = s.indexOf(".");
                if (rs < 0) {
                    rs = s.length;
                    s += ".";
                }
                while (s.length <= rs + 2) {
                    s += "0";
                }
                return s;
            }
        }
    };
</script>

<style scoped>
    .entity{
        background: #fff;
        height:100%;
    }
    #after-address{
        color:#000;
        font-size:14px;
        padding:10px;
        border-bottom: 1px solid #eee;
    }
    div#ul{
        padding:0 10px;
        box-sizing: border-box;
    }
    div.li{
        padding-top: 10px;
        height:100px;
        box-sizing: border-box;
        font-size:14px;
        color:#000;
        border-bottom: 1px solid #eee;
    }
    div.li .icon{
        display: block;
        object-fit: contain;
        width:80px;
        height:80px;
        float: left;
        border:1px solid #eee;
        box-sizing: border-box;
    }
    div.li .right{
        position: relative;
        float:right;
        width: 270px;
        height:80px;
        padding-top:5px;
        box-sizing: border-box;
    }
    div.li .right .name{
        width: 100%;
        font-size:16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-bottom: 5px;
    }
    div.li .right .exchange_number{
        position: absolute;
        left:0;
        bottom: 5px;
    }
    div.li .right .number{
        position: absolute;
        right:0;
        bottom: 5px;
    }
    #footer{
        position: fixed;
        z-index:10;
        bottom: 0;
        width:375px;
    }
    #footer .button{
        border-top:1px solid #eee;
    }
    #footer .button span{
        position: relative;
        top:-16px;
        left:3px;
    }
    #footer .button:nth-of-type(1){
        border-right: 1px solid #fff;
    }
    #qrcode{
        position: fixed;
        z-index:20;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background: rgba(0,0,0,0.8);
    }
    #qrcode .content{
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        width: 100%;
        text-align: center;
        font-size:16px;
        color:#fff;
    }
    #qrcode .close{
        position: absolute;
        top:20px;
        right:20px;
        font-size:20px;
        color:#fff;
        border:1px solid #fff;
        border-radius:20px;
        padding:5px;
    }
    #qrcode .content img{
        width: 200px;
        height:200px;
        display: block;
        margin:0 auto 10px auto;
    }
    .self-iconfont{
        position: relative;
        top:-6px;
        width:30px;
        height:30px;
        display: inline-block;
    }
</style>
